<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{common/layout :: html(title='平台公告', content=~{::content})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平台公告 - 扶贫助农电商平台</title>
    
    <link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/webjars/font-awesome/6.4.0/css/all.min.css}" rel="stylesheet">
    
    <style>
        .page-header {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 60px 0;
        }
        .announcement-item {
            border-left: 5px solid #28a745;
            background-color: #f8f9fa;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 5px;
            transition: box-shadow 0.3s;
        }
        .announcement-item:hover {
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .announcement-title {
            color: #343a40;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div th:fragment="content">
        <section class="page-header">
            <div class="container text-center">
                <h1 class="display-5 fw-bold">平台公告</h1>
                <p class="lead">了解平台最新动态和重要通知</p>
            </div>
        </section>

        <main class="container py-5">
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <div th:if="${#lists.isEmpty(announcementList)}" class="text-center py-5">
                        <i class="fas fa-bullhorn fa-4x text-muted mb-3"></i>
                        <h4 class="text-muted">暂无公告</h4>
                    </div>
                    
                    <div th:each="ann : ${announcementList}" class="announcement-item">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span th:if="${ann.type}" th:text="${ann.type}" class="badge bg-success"></span>
                            <small class="text-muted">
                                <i class="fas fa-calendar-alt"></i>
                                <span th:text="${#temporals.format(ann.createTime, 'yyyy-MM-dd')}"></span>
                            </small>
                        </div>
                        <h4>
                            <a th:href="@{/announcement/detail/{id}(id=${ann.id})}" th:text="${ann.title}" class="announcement-title"></a>
                        </h4>
                        <p th:text="${#strings.abbreviate(ann.content, 150)}"></p>
                        <a th:href="@{/announcement/detail/{id}(id=${ann.id})}" class="btn btn-sm btn-outline-success">查看详情</a>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script th:src="@{/webjars/jquery/3.7.0/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}"></script>
</body>
</html> 